<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>wildlife records</title>
</head>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./style/wildlife.css">
<script src="./script/d3.v4.js"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />

<body>
    <div class="container">
        <h3>大标题</h3>
        <div class="row" style="display: flex;align-items: center;">
            
            <div class="col-md-2">
                    <p class="text-center">年份:</p>
                <select class="form-control select-year">
                </select>
                <p class="text-center">物种:</p>
                <select class="form-control ficName-list ficName-sf-list" style="margin-top: 20px;">
                </select>
            </div>
            <div class="col-md-1">
                <p class="counts"></p>
            </div>
            <div class="all-type col-md-7">
                <svg width="760" height="600" id="all-count"></svg>
            </div>
            <!-- <div class="col-md-2">
                <select class="form-control select-species">
                </select>
            </div> -->
        </div>
        <div class="row">
            <!-- <div class="all-type col-md-6">
                <svg width="760" height="600" id="all-count"></svg>
            </div> -->
            <div class="content">
                <div class="col-md-6">标题一</div>
                <div class="col-md-6">标题二</div>
            </div>
            <div class="content">
                    <!-- style='width: 800px; height: 800px;' -->
                <div id="year-map" class="col-md-6" style='height: 500px;'></div>
                <div id="year-pie" class="col-md-6"></div>
            </div>
        </div>
        <!-- <h3>折线图：查看每个物种的数量变化</h3> -->
        <!-- <div class="row"> -->
            <!-- <div class="col-md-1">
                <p class="text-center">ScientificName:</p>
            </div> -->
            <!-- <div class="col-md-2">
                <select class="form-control ficName-list">
                </select>
            </div> -->
        <!-- </div> -->
        <div class="content">
            <div class="col-md-6">
                标题一
            </div>
            <div class="col-md-6">
                标题二
            </div>
        </div>
        <div class="content">
            <div class="col-md-6">
                <!-- width=1170 height=500 -->
                    <svg class="line-chart" >
                            <!--折线图-->
                        </svg>
            </div>
            <div class="col-md-6">
                <!-- width=1170 height=500 -->
                <svg class="map-chart" >
                        <!--地图图-->
                    </svg>
            </div>
        </div>
        <!-- <svg class="line-chart" width=1170 height=500>
        </svg> -->
        <!-- <h3>map chart</h3>
        <div class="row">
            <div class="col-md-2">
                <p class="text-center">ScientificName:</p>
            </div>
            <div class="col-md-2">
                <select class="form-control map-sf-list">

                </select>
            </div>
        </div>
        <svg class="map-chart" width=1170 height=500>

        </svg> -->
    </div>
    <div class="auto-tooltip"></div>
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
    <script src="./script/ACT_Wildlife_Atlas_Records.js"></script>
    <script src="./script/wildlifeRecords.js" defer></script>
    <script src="./script/lineMap.js"></script>
</body>

</html>